<template>
  <div id="pixi2"></div>
</template>

<script setup>
import { onMounted } from "vue";
import { Application, Assets, Sprite, AnimatedSprite, Texture } from "pixi.js";

const app = new Application();
const urlPadding = "/";
let act_1_animate_bg_img_arr = [];
let asset = null;

// 加载图片
const loaderImage = async () => {
  for (let $e = 0; $e < 11; $e++) {
    act_1_animate_bg_img_arr.push(
      urlPadding + "new-1-sky-" + ($e + 1) + ".jpg"
    );
  }
  console.log("imgArr->", act_1_animate_bg_img_arr.join(","));
  asset = await Assets.load([
    urlPadding + "new-1-1.jpg",
    urlPadding + "new-1-2.png",
    urlPadding + "new-1-3.png",
    ...act_1_animate_bg_img_arr,
  ]);
};
const loadingFinish = () => {
  const assetTarget = asset[urlPadding + "new-1-1.jpg"];
  const spriteTarget = new Sprite(assetTarget);
  app.stage.addChild(spriteTarget);

  // 动画组
  const textureArray = [];
  for (let key = 0; key < act_1_animate_bg_img_arr.length - 1; key++) {
    const texture = Texture.from(act_1_animate_bg_img_arr[key]);
    textureArray.push(texture);
  }
  const sprite4 = new AnimatedSprite(textureArray);
  app.stage.addChild(sprite4);
  sprite4.visible = true;
  sprite4.animationSpeed = 0.1;
  sprite4.play();

  // 背景图
  var sprite2 = new Sprite(asset[urlPadding + "new-1-2.png"]);
  sprite2.position.set(290, 297);
  app.stage.addChild(sprite2);

  var sprite3 = new Sprite(asset[urlPadding + "new-1-3.png"]);
  sprite3.position.set(-200, 0);
  app.stage.addChild(sprite3);
};
onMounted(async () => {
  await app.init({ resizeTo: window });
  document.body.appendChild(app.canvas);
  await loaderImage();
  loadingFinish();
});
</script>

<style scoped></style>
